<template>
	<view>
		<view class="header_bt_01">
			<image src="http://124.222.72.174:8008/images/头像/头像2.jpg" class="hander_tx"></image>
			<uni-search-bar class="uni-mt-10" style="color: #f3f3f3;" bgColor="#F8F8F8" radius="100"
				placeholder="搜索(需要寻找的东西)" clearButton="auto" cancelButton="auto" @confirm="search" />
		</view>
		<view class="Run_1" style="margin-top: 120rpx;border-radius: 200rpx;">
			<view class="Run_1_1" :class="GreadId===0?'head_Gle':''" @click="OnquAndmai(0)">
				<text class="Run_2">全部</text>
			</view>

			<view class="Run_1_2" :class="GreadId===1?'head_Gle':''" @click="OnquAndmai(1)">
				<text class="Run_3">寻找</text>
			</view>
			<view class="Run_1_2" :class="GreadId===2?'head_Gle':''" @click="OnquAndmai(2)">
				<text class="Run_3">拾取</text>
			</view>
		</view>

		<view style="margin-top: 120rpx;" v-if="GreadId===0">
			<!-- 相关内容 -->
			<uni-group mode="card" v-for="(item,i) in LostFountList" :key="i">
				<view class="uni_bottor_xz">
					<!--闲置模块内1功能区 -->
					<view class="uni_bottor_xz_1">
						<!--闲置模块内2功能区 头像 昵称 时间 购买 -->
						<view class="uni_bottor_xz_2">
							<!--头像 -->
							<text class="uniBt_tx1" v-if="item.type===1"><text
									style="position: absolute;left: 20rpx;top: 8rpx;">寻</text></text>
							<text class="uniBt_tx2" v-if="item.type===2"><text
									style="position: absolute;left: 20rpx;top: 8rpx;">拾</text></text>
							<!--昵称 -->
							<text class="uniBt_Name">{{ item.userName }}</text>
							<!--发布时间 -->
							<text class="uniBt_Time">{{ item.Ftime }}</text>
							<!--右侧按钮 -->
							<button class="uniBt_but" type="warn" size="mini" v-if="item.type===1"
								@click="onIphoneint(item.phone)">联系方式</button>
							<button class="uniBt_but" style="background-color: #1ABC9C;" v-if="item.type===2"
								type="warn" size="mini" @click="onIphoneint(item.phone)">联系方式</button>
						</view>
					</view>
				</view>
				<!--闲置模块内3 外围边框灰底 -->
				<uni-group mode="card" top=60>
					<!-- 闲置-->
					<!-- 闲置-->
					<view class="uni_bottor_xz_4">
						<!--闲置模块内55 功能区 标题 介绍 右侧图片 价格 -->
						<text class="wPname" :style="item.type===1?'color: #D9001B;':'color: #1ABC9C;'">物品名:</text>
						<text class="nuiBt_title">{{ item.title}}</text>
						<text class="Wpxq" :style="item.type===1?'color: #D9001B;':'color: #1ABC9C;'">详情:</text>
						<text class="nuiBt_text" space=nbsp>{{ item.text }}</text>
						<!-- <image class="nuiBt_img" :src="item.lostImg"></image> -->
						<view class="nuiBt_img">
							<svideo style="width: 120px;" :height="height" :data="item.lostImg"></svideo>
						</view>
					</view>
				</uni-group>
			</uni-group>
		</view>

		<view style="margin-top: 120rpx;" v-if="GreadId>0">
			<!-- 相关内容 -->
			<uni-group mode="card" v-for="(item,i) in LostFountList" :key="i" v-if="item.type===GreadId">
				<view class="uni_bottor_xz">
					<!--闲置模块内1功能区 -->
					<view class="uni_bottor_xz_1">
						<!--闲置模块内2功能区 头像 昵称 时间 购买 -->
						<view class="uni_bottor_xz_2">
							<!--头像 -->
							<text class="uniBt_tx1" v-if="GreadId===1"><text
									style="position: absolute;left: 20rpx;top: 8rpx;">寻</text></text>
							<text class="uniBt_tx2" v-if="GreadId===2"><text
									style="position: absolute;left: 20rpx;top: 8rpx;">拾</text></text>
							<!--昵称 -->
							<text class="uniBt_Name">{{ item.userName }}</text>
							<!--发布时间 -->
							<text class="uniBt_Time">{{ item.Ftime }}</text>
							<!--右侧按钮 -->
							<button class="uniBt_but" type="warn" size="mini" v-if="item.type===1"
								@click="onIphoneint(item.phone)">联系方式</button>
							<button class="uniBt_but" style="background-color: #1ABC9C;" v-if="item.type===2"
								type="warn" size="mini" @click="onIphoneint(item.phone)">联系方式</button>
						</view>
					</view>
				</view>
				<!--闲置模块内3 外围边框灰底 -->
				<uni-group mode="card" top=60>
					<!-- 闲置-->
					<!-- 闲置-->
					<view class="uni_bottor_xz_4">
						<!--闲置模块内55 功能区 标题 介绍 右侧图片 价格 -->
						<text class="wPname" :style="item.type===1?'color: #D9001B;':'color: #1ABC9C;'">物品名:</text>
						<text class="nuiBt_title">{{ item.title}}</text>
						<text class="Wpxq" :style="item.type===1?'color: #D9001B;':'color: #1ABC9C;'">详情:</text>
						<text class="nuiBt_text" space=nbsp>{{ item.text }}</text>
						<view class="nuiBt_img">
							<svideo style="width: 120px;" :height="height" :data="item.lostImg"></svideo>
						</view>
					</view>
				</uni-group>
			</uni-group>
		</view>
		<view style="padding:5px 0px 20px 0px;" v-if="GreadId===0 || typeNum>3">
			<uni-load-more color="#007AFF" :status="status" iconType="auto" />
			<view style="height: 50px;">

			</view>
		</view>

	</view>
</template>

<script>
	import svideo from '@/components/s-video/s-video.vue'
	export default {
		components: {
			svideo
		},
		data() {
			return {
				GreadId: 0,
				LostFountList: [{
						no: "159862155615",
						userName: "淡淡一笑",
						phone: '13712345678',
						Ftime: "2022年4月8日 18:34",
						type: 1,
						title: "校园卡",
						text: '在第三食堂丢失了一张校园卡，同学们如果有拾取，请及时联系我谢谢！',
						lostImg: [
					'http://124.222.72.174:8008/images/二手转卖展示页-Sh_resale/构建之法.jpg',
					'http://124.222.72.174:8008/images/二手转卖展示页-Sh_resale/构建之法.jpg',
					'http://124.222.72.174:8008/images/二手转卖展示页-Sh_resale/构建之法.jpg',
				]
					},
					{
						no: "1598621232315",
						userName: "佳佳",
						phone: '13559453225',
						Ftime: "2022年4月9日 18:34",
						type: 2,
						title: "羽绒服1",
						text: '在东操主席台前，捡到一件耐克的羽绒服，如果有同学丢失，请及时联系我！',
						lostImg: [
					'http://124.222.72.174:8008/images/二手转卖展示页-Sh_resale/构建之法.jpg',
					'http://124.222.72.174:8008/images/二手转卖展示页-Sh_resale/构建之法.jpg',
					'http://124.222.72.174:8008/images/二手转卖展示页-Sh_resale/构建之法.jpg',
				]
					},
					{
						no: "159862345",
						userName: "云云",
						phone: '13712345678',
						Ftime: "2022年4月8日 18:34",
						type: 1,
						title: "校园卡",
						text: '在第三食堂丢失了一张校园卡，同学们如果有拾取，请及时联系我谢谢！',
						lostImg: [
					'http://124.222.72.174:8008/images/二手转卖展示页-Sh_resale/构建之法.jpg',
					'http://124.222.72.174:8008/images/二手转卖展示页-Sh_resale/构建之法.jpg',
					'http://124.222.72.174:8008/images/二手转卖展示页-Sh_resale/构建之法.jpg',
				]
					},
					{
						no: "1598621232315",
						userName: "卫卫",
						phone: '13559453225',
						Ftime: "2022年4月9日 18:34",
						type: 2,
						title: "羽绒服2",
						text: '在东操主席台前，捡到一件耐克的羽绒服，如果有同学丢失，请及时联系我！',
						lostImg: [
					'http://124.222.72.174:8008/images/二手转卖展示页-Sh_resale/构建之法.jpg',
					'http://124.222.72.174:8008/images/二手转卖展示页-Sh_resale/构建之法.jpg',
					'http://124.222.72.174:8008/images/二手转卖展示页-Sh_resale/构建之法.jpg',
				]
					}

				],
				pageNum: 1,
				status: 'more',
				typeNum: 0,
				height: 120,
				materialList: [
					'http://124.222.72.174:8008/images/二手转卖展示页-Sh_resale/构建之法.jpg',
					'http://124.222.72.174:8008/images/二手转卖展示页-Sh_resale/构建之法.jpg',
					'http://124.222.72.174:8008/images/二手转卖展示页-Sh_resale/构建之法.jpg',
				]


			};
		},
		onLoad() {

		},
		methods: {
			OnquAndmai(value) {
				this.GreadId = value
				this.typeNum = 0
				this.LostFountList.forEach((item, value, arr) => {
					if (item.type === this.GreadId) {
						this.typeNum++
					}
				})
			},
			async getmo() {
				// 3.1 发起请求
				// const {
				// 	data: res
				// } = await uni.$http.post('/api/project/selectXZImages', {
				// 	"a": uni.$getRSAcode('page=' + this.pageNum)
				// })
				// if(res.status===101){
				// 	this.status = 'noMore'
				// }else if(res.status===400){
				// 	 return uni.$showMsg()
				// }else if(res.status===410){
				// 	return uni.$showMsg()
				// }else if(res.status===200){
				// 	var Decrpt = uni.$getRSADecrypt(res.data)
				// 	console.log("解密数据" + Decrpt)
				// 	this.Lslist = JSON.parse(Decrpt)
				// 	let temp = {}
				// 	this.Lslist.forEach((item, index, arr) => {
				// 		if (index % 2 == 0) {
				// 			temp['data1'] = item
				// 		} else if (index % 2 == 1) {
				// 			temp['data2'] = item
				// 			this.ShopxzList.push(temp)
				// 			temp = {}
				// 		}
				// 	})
				this.LostFountList.push({
					no: "159862155615",
					userName: "淡淡一笑",
					phone: '13712345678',
					Ftime: "2022年4月8日 18:34",
					type: 1,
					title: "校园卡",
					text: '在第三食堂丢失了一张校园卡，同学们如果有拾取，请及时联系我谢谢！',
					lostImg: [
						'http://124.222.72.174:8008/images/二手转卖展示页-Sh_resale/构建之法.jpg',
						'http://124.222.72.174:8008/images/二手转卖展示页-Sh_resale/构建之法.jpg',
						'http://124.222.72.174:8008/images/二手转卖展示页-Sh_resale/构建之法.jpg',
					]
				})
				this.status = 'more'
			},
			onIphoneint(iphone) {
				const res = uni.getSystemInfoSync();
				// ios系统默认有个模态框
				if (res.platform == 'ios') {
					uni.makePhoneCall({
						phoneNumber: iphone,

						success() {
							console.log('拨打成功了');
						},
						fail() {
							console.log('拨打失败了');
						}
					})
				} else {
					//安卓手机手动设置一个showActionSheet
					uni.showActionSheet({
						itemList: [iphone, '呼叫'],
						success: function(res) {
							console.log(res);
							if (res.tapIndex == 1) {
								uni.makePhoneCall({
									phoneNumber: iphone,
								})
							}
						}
					})
				}

			},

		},
		onReachBottom() {
			console.log("触底啦")
			this.status = 'loading'
			const that = this;
			setTimeout(function() {
				that.pageNum++,
					that.getmo()
			}, 1000);
		},
	}
</script>

<style lang="scss">
	//头部样式
	.header_bt_01 {
		height: 115rpx;
		background-color: #FFFFFF;
		border-bottom: 2px solid #F7F7F7;

	}

	//头部样式--头像
	.hander_tx {
		width: 90rpx;
		height: 90rpx;
		border-radius: 100px;
		margin: 0px 0px 0px 8px;
	}

	//头部样式--取消字体 白色
	/deep/ .uni-searchbar__cancel {
		padding-left: 10px;
		line-height: 36px;
		font-size: 14px;
		color: #f3f3f3;
	}

	//顶部导航栏
	.Run_1 {
		border-width: 0px;
		position: absolute;
		left: 24rpx;
		top: 0px;
		width: 700rpx;
		height: 80rpx;
		display: flex;
		background-color: #FFFFFF;
		text-align: center;
	}

	.Run_1_1,
	.Run_1_2 {
		width: 325rpx;
	}

	//顶部导航栏 文本样式
	.Run_2,
	.Run_3 {
		font-size: 20px;
		font-family: "微软雅黑";
		height: 80rpx;
		line-height: 80rpx;
	}

	.head_Gle {
		background-color: rgba(81, 211, 211, 1);
		border-radius: 50rpx;
		font-family: "微软雅黑";
		color: seashell;
		font-weight: 700;
		font-style: italic;
		letter-spacing: normal;
		box-shadow: 5px 10px 20px #51d3d3;
	}

	//底部校园状态样式
	.uni_bottor_xz_2 {
		position: relative;
	}

	//头像
	.uniBt_tx1 {
		border-width: 0px;
		position: absolute;
		left: 0px;
		top: 0px;
		width: 90rpx;
		height: 90rpx;
		border-radius: 100px;
		font-weight: 900;
		font-style: normal;
		font-size: 26px;
		color: #FFFFFF;
		background-color: #D9001B;
	}

	//头像
	.uniBt_tx2 {
		border-width: 0px;
		position: absolute;
		left: 0px;
		top: 0px;
		width: 90rpx;
		height: 90rpx;
		border-radius: 100px;
		font-weight: 900;
		font-style: normal;
		font-size: 26px;
		color: #FFFFFF;
		background-color: #1ABC9C;
	}

	//昵称
	.uniBt_Name {
		border-width: 0px;
		position: absolute;
		left: 116rpx;
		top: 12rpx;
		width: 300rpx;
		height: 54rpx;
		display: flex;
		font-family: '仿宋 Bold', '仿宋';
		font-weight: 700;
		font-style: normal;
		font-size: 16px;
	}

	//时间
	.uniBt_Time {
		border-width: 0px;
		position: absolute;
		left: 116rpx;
		top: 66rpx;
		width: 400rpx;
		height: 50rpx;
		display: flex;
		color: #A8A5A5;
		font-size: 13px;
	}

	//按钮
	.uniBt_but {
		border-width: 0px;
		position: absolute;
		left: 452rpx;
		top: 23rpx;
		width: 202rpx;
		height: 56rpx;
		background: inherit;
		background-color: rgba(217, 0, 27, 0.682352941176471);
		border: none;
		border-radius: 14px;
	}

	//内部2 
	.uni_bottor_xz_4 {
		position: relative;
	}

	//标题
	.nuiBt_title {
		border-width: 0px;
		left: 170rpx;
		top: 10rpx;
		width: 200rpx;
		height: 34rpx;
		display: flex;
		font-size: 16px;
		padding: 5px;
		position: absolute;
		font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
		font-weight: 700;
		font-style: normal;
		font-size: 15px;
		color: #797979;
	}

	//内容
	.nuiBt_text {
		//position: absolute;
		width: 320rpx;
		height: 120rpx;
		font-size: 13px;
		display: inline-block;
		font-family: "微软雅黑";
		padding: 5px;
		margin-top: 60px;
	}

	//右侧图片
	.nuiBt_img {
		border-width: 0px;
		position: absolute;
		left: 320rpx;
		top: 10px;
		width: 250rpx;
		height: 300rpx;
		display: flex;
	}

	//右侧价格
	.nuiBt_Money {
		position: absolute;
		left: 400rpx;
		top: 240rpx;
		width: 160rpx;
		height: 36rpx;
		display: flex;
		color: #E55163;
	}

	//物品名
	.wPname {
		border-width: 0px;
		position: absolute;
		left: 10rpx;
		top: 20rpx;
		width: 160rpx;
		height: 66rpx;
		display: flex;
		font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
		font-weight: 700;
		font-style: normal;
		font-size: 16px;
		color: #D9001B;
	}

	.Wpxq {
		border-width: 0px;
		position: absolute;
		left: 10rpx;
		top: 70rpx;
		width: 160rpx;
		height: 66rpx;
		display: flex;
		font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
		font-weight: 700;
		font-style: normal;
		font-size: 16px;
		color: #D9001B;
	}
</style>
